<template>
    <div class="cart">
        <header>
            <span class="exit" @click="changeText">{{text}}</span><span>购物车</span><span></span>
        </header>

        <div class="container">
            <van-checkbox-group v-model="result" ref="checkboxGroup">
                <van-swipe-cell v-for="item in products" :key="item.id">
                    <van-checkbox class="cart-check" :name="item" checked-color="#ee0a24">
                        <div class="content" @click.stop="fun">
                            <img :src="item.src" alt="">
                            <div class="detail">
                                <div v-html="item.title" class="title"></div>
                                <div class="sku">{{item.up}}{{item.btm}}</div>
                                <div class="step-box">
                                    <span>￥{{item.price}}</span>
                                    <van-stepper v-model="item.number" min="1"/>
                                </div>
                            </div>
                        </div>
                    </van-checkbox>
                    <template #right>
                        <van-button square text="删除" @click="del(item)" type="danger" class="delete-button" />
                    </template>
                </van-swipe-cell>
            </van-checkbox-group>

            <div class="get-your-like">
                <h2>猜你喜欢</h2>
                <ul>
                    <li v-for="item in list" :key="item.id">
                        <img :src="item.pic"/>
                        <p class="title-back">{{item.name}}</p>
                        <p class="title-like">{{item.name}}</p>
                        <p class="price-num"><span class="price-box">￥{{item.minPrice}}</span><span class="sales">已售{{item.numberOrders}}</span></p>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="create-order">
            <div class="left">
                <van-checkbox v-model="checkAllBtn" @click="checkAll" checked-color="#ee0a24">全选</van-checkbox>
            </div>
            <div class="right">
                <section class="sum">合计：￥{{sum}}</section>
                <section class="set-order" @click="btnSet">{{btnText}}</section>
            </div>
        </div>
    </div>
</template>
<script>
import { useStore } from 'vuex'
import { ref, computed, watchEffect } from 'vue'
import { recomend } from '@/api'
export default {
    setup() {
        let store = useStore() // 引入vuex数据
        let text = ref('编辑') // 头部编辑按钮内容
        let btnText = ref('下单') // 下单按钮内容
        function changeText() { // 改变按钮内容的事件
            if(text.value === '编辑') {
                text.value = '完成'
                btnText.value = "删除"
            } else {
                text.value = '编辑'
                btnText.value = "下单"
            }
        }
        // 引入购物车数据
        const products = computed(() => store.state.products)
        let sum = ref(0) // 用来记录选中的商品的价格综合
        let result = ref([]) // 收集勾选数据的数组
        let checkAllBtn = ref(false)
        const checkboxGroup = ref(null);
        const checkAll = () => {
            checkboxGroup.value.toggleAll();
        }

        // watchEffect 也是vue3提供的监听数据变化的方法 他会监听ref声明的数据的变化
        watchEffect(() => {
            sum.value = 0
            // console.log(result.value);
            // 当选中的数据的数量 小于 商品的总数量 则证明数据没有全选
            if(result.value.length < products.value.length) {
                checkAllBtn.value = false
            } else {
                checkAllBtn.value = true
            }
            result.value.forEach(item => {
                sum.value += item.price*item.number
            })
        })

        // 批量删除或者下单
        function btnSet() {
            if(btnText.value == "删除") {
                store.commit('delGood', result.value)
                result.value = []
            }
        }

        function del(item) {
            store.commit('del', item.upid)
            result.value = result.value
        }
        let list = ref([])
        // 写一个随机三个或四个的随机数
        let count = Math.round(Math.random() + 3) 
        // let inds = []
        // 请求推荐列表数据
        recomend().then(res => {
            // console.log(res);
            let arr = res.data
            var inds = []
            function randomInd() {
                let ind = Math.round(Math.random()*(arr.length - 1)) 
                
                if(inds.includes(ind)) {
                    randomInd()
                } else {
                    if(inds.length < count) {
                        inds.push(ind)
                        randomInd()
                    } else {
                        return
                    }
                }
            }
            randomInd()
            for(let j = 0; j<inds.length;j++) {
                list.value.push(arr[inds[j]])
            }

            
        })
        return {
            text,
            changeText,
            products,
            result,
            btnText,
            checkAll,
            checkboxGroup,
            checkAllBtn,
            sum,
            fun:() => false,
            btnSet,
            del,
            list
        }
    }
}
</script>
<style lang="scss" scoped>
    .cart {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    header {
        width: 100%;
        line-height: 100px;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        font-size: 28px;
        padding: 0 20px;
        .exit {
            color: #d00000;
            font-size: 28px;
        }
    }
    .create-order {
        width: 100%;
        height: 100px;
        position: fixed;
        bottom: 100px;
        left:0;
        border: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        padding-left: 20px;
        color: #333;
        font-weight: 300;
        .left {
            font-size: 24px;
        }
        .right {
            font-size: 28px;
            display: flex;
            .set-order {
                width: 234px;
                background-color: #d00000;
                color:#fff;
                text-align: center;
                line-height: 100px;
            }
            .sum {
                line-height: 100px;
                margin-right: 40px;
                color: #d00000;
                font-weight: 500;
            }
        }
    }
    .cart-check {
        padding: 30px 0;
        background-color: #fff;
        padding-left: 30px;
    }
    .content {
        width: 100%;
        display: flex;
        .detail {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        img {
            width: 160px;
            height: 160px;
            flex-shrink: 0;
            margin-right: 30px;
            margin-left: 30px;
        }
        .title {
            font-size: 28px;
        }
        .sku {
            color: #888;
            font-size: 20px;
        }
        .step-box {
            display: flex;
            width: 420px;
            justify-content: space-between;
            font-size:26px;
            align-items: flex-end;
        }
    }
    .container {
        height: calc(100% - 300px);
        overflow: auto;
    }
    .delete-button {
        height: 100%;
    }
    .get-your-like {
        width: 100%;
        background: #fff;
        h2 {
            font-size: 32px;
            text-align: center;
            padding: 30px 0;
        }
        ul {
            display: flex;
            flex-wrap: wrap;
            padding: 0 30px;
            justify-content: space-between;
            li {
                flex-basis: calc((100% - 40px) / 2);
                position: relative;
                flex-grow: 0;
                flex-shrink: 0;
                img {
                    width: 336px;
                    height: 400px;
                    display: block;
                }
                .title-back {
                    font-size: 20px;
                    background: #f0edd4;
                    color: #b69b72;
                    line-height: 70px;   
                    padding: 0 20px;
                    position: absolute;
                    top: 330px;  
                    width: 336px;  
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;         
                }
                .title-like {
                    font-size: 28px;
                    width: 336px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin: 30px 0;
                }
                .price-num {
                    display: flex;
                    width: 336px;
                    justify-content: space-between;
                    font-size: 26px;
                    margin-bottom: 40px;
                    .price-box {
                        color: #d00000;
                    }
                    .sales {
                        font-size: 20px;
                        color: #888;
                    }
                }
            }
        }
    }
</style>